import React from 'react';
import { motion } from 'framer-motion';

interface DeviceModelProps {
  type: 'server' | 'router' | 'switch' | 'ups';
  status: 'normal' | 'warning' | 'critical';
  size?: { width: number; height: number };
  rotation?: { x: number; y: number; z: number };
  pulseAnimation?: boolean;
}

const DeviceModel: React.FC<DeviceModelProps> = ({
  type,
  status,
  size = { width: 200, height: 200 },
  rotation = { x: 0, y: 0, z: 0 },
  pulseAnimation = true,
}) => {
  // 根据设备类型获取相应的样式和模型结构
  const getDeviceStructure = () => {
    switch (type) {
      case 'server':
        return (
          <div style={serverStyles.container}>
            <div style={serverStyles.frame}>
              <div style={serverStyles.frontPanel}>
                <div style={serverStyles.powerIndicator} data-status={status} />
                <div style={serverStyles.networkLights}>
                  {[1, 2, 3].map((i) => (
                    <div key={i} style={serverStyles.networkLight} data-status={status} />
                  ))}
                </div>
                <div style={serverStyles.driveBays}>
                  {[1, 2, 3, 4].map((i) => (
                    <div key={i} style={serverStyles.driveBay} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        );
      case 'router':
        return (
          <div style={routerStyles.container}>
            <div style={routerStyles.body}>
              <div style={routerStyles.ports}>
                {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
                  <div key={i} style={routerStyles.port} data-status={status} />
                ))}
              </div>
              <div style={routerStyles.indicators}>
                <div style={routerStyles.powerIndicator} data-status={status} />
                <div style={routerStyles.networkIndicator} data-status={status} />
              </div>
            </div>
          </div>
        );
      case 'switch':
        return (
          <div style={switchStyles.container}>
            <div style={switchStyles.body}>
              <div style={switchStyles.ports}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((i) => (
                  <div key={i} style={switchStyles.port} data-status={status} />
                ))}
              </div>
              <div style={switchStyles.leds}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((i) => (
                  <div key={i} style={switchStyles.led} data-status={status} />
                ))}
              </div>
            </div>
          </div>
        );
      case 'ups':
        return (
          <div style={upsStyles.container}>
            <div style={upsStyles.body}>
              <div style={upsStyles.display}>
                <div style={upsStyles.batteryIndicator} data-status={status} />
                <div style={upsStyles.loadIndicator}>
                  <div style={upsStyles.loadBar} />
                </div>
              </div>
              <div style={upsStyles.outputs}>
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} style={upsStyles.output} data-status={status} />
                ))}
              </div>
            </div>
          </div>
        );
      default:
        return null;
    }
  };

  // 获取状态颜色
  const getStatusColor = () => {
    switch (status) {
      case 'normal':
        return '#4CAF50';
      case 'warning':
        return '#FFC107';
      case 'critical':
        return '#F44336';
      default:
        return '#4CAF50';
    }
  };

  // 动画配置
  const containerVariants = {
    initial: { opacity: 0, scale: 0.8 },
    animate: { 
      opacity: 1, 
      scale: 1,
      transition: { duration: 0.5 }
    },
    hover: { 
      scale: 1.05,
      transition: { duration: 0.3 }
    }
  };

  const pulseVariants = {
    pulse: {
      boxShadow: [
        `0 0 0 0 rgba(${status === 'normal' ? '76, 175, 80' : status === 'warning' ? '255, 193, 7' : '244, 67, 54'}, 0.7)`,
        `0 0 0 8px rgba(${status === 'normal' ? '76, 175, 80' : status === 'warning' ? '255, 193, 7' : '244, 67, 54'}, 0)`
      ],
      transition: {
        repeat: Infinity,
        duration: 2
      }
    }
  };

  return (
    <motion.div
      style={{
        width: size.width,
        height: size.height,
        perspective: 1000,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      variants={containerVariants}
      initial="initial"
      animate="animate"
      whileHover="hover"
    >
      <motion.div
        style={{
          transformStyle: 'preserve-3d' as const,
          transform: `rotateX(${rotation.x}deg) rotateY(${rotation.y}deg) rotateZ(${rotation.z}deg)`,
        }}
        className="device-3d-model"
      >
        <motion.div
          style={{
            position: 'absolute' as const,
            width: size.width,
            height: size.height,
            borderRadius: '8px',
            boxShadow: `0 0 20px 2px ${getStatusColor()}33`,
            background: `linear-gradient(135deg, ${getStatusColor()}11, ${getStatusColor()}22)`,
          }}
          animate={pulseAnimation ? "pulse" : {}}
          variants={pulseVariants}
        />
        <motion.div
          style={{
            position: 'absolute' as const,
            width: size.width,
            height: size.height,
          }}
        >
          {getDeviceStructure()}
        </motion.div>
      </motion.div>
    </motion.div>
  );
};

// 服务器样式
const serverStyles: Record<string, React.CSSProperties> = {
  container: {
    width: '100%',
    height: '100%',
    position: 'relative' as const,
  },
  frame: {
    position: 'absolute' as const,
    top: '10%',
    left: '10%',
    right: '10%',
    bottom: '10%',
    backgroundColor: '#1a1a2e',
    border: '2px solid #16213e',
    borderRadius: '4px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)',
  },
  frontPanel: {
    width: '100%',
    height: '100%',
    padding: '15px',
    position: 'relative' as const,
  },
  powerIndicator: {
    position: 'absolute' as const,
    top: '15px',
    right: '15px',
    width: '10px',
    height: '10px',
    borderRadius: '50%',
    backgroundColor: '#4CAF50',
    boxShadow: '0 0 8px #4CAF50',
  },
  networkLights: {
    position: 'absolute' as const,
    top: '15px',
    left: '15px',
    display: 'flex',
    gap: '5px',
  },
  networkLight: {
    width: '6px',
    height: '6px',
    borderRadius: '50%',
    backgroundColor: '#2196F3',
    boxShadow: '0 0 4px #2196F3',
  },
  driveBays: {
    position: 'absolute' as const,
    top: '40px',
    left: '15px',
    right: '15px',
    bottom: '15px',
    display: 'flex',
    flexDirection: 'column' as const,
    gap: '10px',
  },
  driveBay: {
    flex: 1,
    backgroundColor: '#0f3460',
    border: '1px solid #16213e',
    borderRadius: '2px',
  },
};

// 路由器样式
const routerStyles: Record<string, React.CSSProperties> = {
  container: {
    width: '100%',
    height: '100%',
    position: 'relative' as const,
  },
  body: {
    position: 'absolute' as const,
    top: '20%',
    left: '10%',
    right: '10%',
    bottom: '20%',
    backgroundColor: '#1a1a2e',
    border: '2px solid #16213e',
    borderRadius: '4px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)',
  },
  ports: {
    position: 'absolute' as const,
    top: '20%',
    left: '10%',
    right: '10%',
    height: '40%',
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gridTemplateRows: 'repeat(4, 1fr)',
    gap: '8px',
  },
  port: {
    backgroundColor: '#0f3460',
    border: '1px solid #16213e',
    borderRadius: '2px',
    position: 'relative' as const,
  },
  indicators: {
    position: 'absolute' as const,
    bottom: '15px',
    left: '15px',
    right: '15px',
    height: '15px',
    display: 'flex',
    gap: '15px',
  },
  powerIndicator: {
    flex: 1,
    position: 'relative' as const,
  },
  networkIndicator: {
    flex: 1,
    position: 'relative' as const,
  },
};

// 交换机样式
const switchStyles: Record<string, React.CSSProperties> = {
  container: {
    width: '100%',
    height: '100%',
    position: 'relative' as const,
  },
  body: {
    position: 'absolute' as const,
    top: '30%',
    left: '10%',
    right: '10%',
    bottom: '30%',
    backgroundColor: '#1a1a2e',
    border: '2px solid #16213e',
    borderRadius: '4px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)',
  },
  ports: {
    position: 'absolute' as const,
    top: '20%',
    left: '5%',
    right: '5%',
    height: '40%',
    display: 'grid',
    gridTemplateColumns: 'repeat(8, 1fr)',
    gridTemplateRows: 'repeat(2, 1fr)',
    gap: '4px',
  },
  port: {
    backgroundColor: '#0f3460',
    border: '1px solid #16213e',
    borderRadius: '1px',
  },
  leds: {
    position: 'absolute' as const,
    top: '65%',
    left: '5%',
    right: '5%',
    height: '10%',
    display: 'grid',
    gridTemplateColumns: 'repeat(16, 1fr)',
    gap: '4px',
  },
  led: {
    backgroundColor: '#4CAF50',
    boxShadow: '0 0 3px #4CAF50',
    borderRadius: '50%',
  },
};

// UPS样式
const upsStyles: Record<string, React.CSSProperties> = {
  container: {
    width: '100%',
    height: '100%',
    position: 'relative' as const,
  },
  body: {
    position: 'absolute' as const,
    top: '10%',
    left: '15%',
    right: '15%',
    bottom: '10%',
    backgroundColor: '#1a1a2e',
    border: '2px solid #16213e',
    borderRadius: '4px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)',
  },
  display: {
    position: 'absolute' as const,
    top: '15px',
    left: '15px',
    right: '15px',
    height: '40px',
    backgroundColor: '#0f3460',
    border: '1px solid #16213e',
    borderRadius: '2px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  batteryIndicator: {
    width: '60px',
    height: '20px',
    border: '1px solid #4CAF50',
    borderRadius: '2px',
    position: 'relative' as const,
  },
  loadIndicator: {
    width: '60px',
    height: '20px',
    border: '1px solid #2196F3',
    borderRadius: '2px',
    position: 'relative' as const,
  },
  loadBar: {
    position: 'absolute' as const,
    top: '2px',
    left: '2px',
    height: '16px',
    width: '65%',
    backgroundColor: '#2196F3',
    boxShadow: '0 0 4px #2196F3',
  },
  outputs: {
    position: 'absolute' as const,
    top: '70px',
    left: '15px',
    right: '15px',
    bottom: '15px',
    display: 'grid',
    gridTemplateColumns: 'repeat(2, 1fr)',
    gridTemplateRows: 'repeat(2, 1fr)',
    gap: '10px',
  },
  output: {
    backgroundColor: '#0f3460',
    border: '1px solid #16213e',
    borderRadius: '2px',
    position: 'relative' as const,
  },
};

export default DeviceModel;